<template>
  <div id="app">
    <table>
      <tbody>
        <TrCom v-for="(item, index) in goodsArr" :key="index" :tr="item" />
      </tbody>
      <tfoot>All number: {{total}}</tfoot>
    </table>
  </div>
</template>

<script>
import TrCom from './components/TrCom'
export default {
  name: 'App',
  data () {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: 'Watermelon'
        }, {
          count: 0,
          goodsName: 'Banana'
        }, {
          count: 0,
          goodsName: 'Orange'
        }, {
          count: 0,
          goodsName: 'Pineapple'
        }, {
          count: 0,
          goodsName: 'Strawberry'
        }
      ]
    }
  },
  components: {
    TrCom
  },
  computed: {
    total () {
      return this.goodsArr.reduce((p, n) => p + n.count, 0)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
